<template>
	<view class="bizhi">
		<view class="aaa">
			<image :src="bizi[0].url" class="image" @click="getBizhi" mode="aspectFill"></image>
			<view class="goBack" @click="goBack">
					<uni-icons  type="back" size="20" color="#fff"></uni-icons>
			</view>
			<view class="abcd" @click="getBizhi">更换壁纸</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const bizi = ref([]);
	
const abc = async ()=>{
	let res = await uni.request({
		// url:"https://v2.xxapi.cn/api/baisi"
		url:"https://tea.qingnian8.com/tools/taoShow",
		header:{
			'access-key' : '123456'
		}
	});
	bizi.value = res.data.data;
	console.log(res);
}	


const getBizhi =  ()=>{
	abc();
}


const goBack = ()=>{
	uni.navigateBack()
}

abc();
</script>

<style lang="scss" scoped>
.bizhi{
	width: 100%;
	height: 1600rpx;
	.aaa{
		width: 100%;
		height: 1500rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.image{
			margin-top: 100rpx;
			width: 650rpx;
			height: 1000rpx;
		}
		.goBack{
			width:38px;
			height:38px;
			margin-top: 60rpx;
			background:rgba(40, 179, 137,0.5);
			left:30rpx;
			margin-left:0;
			border-radius: 100px;
			backdrop-filter:blur(10rpx);
			border:1rpx solid rgba(255,255,255,0.3);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.abcd{
			margin-top: 100rpx;
			width: 400rpx;
			height: 100rpx;
			border: 1rpx solid #000;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(40, 179, 137,0.5);
			font-size: 18px;
			transition: all 0.3s; /* 过渡动画，让效果更平滑 */
			&:hover {
				transform: scale(1.05); /* 轻微放大 */
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 悬浮时添加阴影 */
			}
		}
	}
}
</style>
